<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <li></li>
    </ul>
    <button>获取电影</button>
    <button>添加电影</button>
    <button>修改电影</button>
    <button>局部修改</button>
    <button>删除电影</button>
    <script>
        // 获取ul和按钮
        let ul = document.querySelector('ul');
        let btns = document.querySelectorAll('button');

        //获取电影列表
        btns[0].onclick = function () {
            // url
            // 默认：GET
            fetch('http://localhost:3000/movies').then(val => val.json().then(val => val))
            .then(val => {
                val.forEach(element => {
                    let li = document.createElement('li');
                    li.innerHTML = element.name;
                    ul.appendChild(li);
                });
            });
        }

        btns[1].onclick = function(){
            // url
            // 配置对象：
                // method
            fetch('http://localhost:3000/movies',{
                method:'post',
                body:`name=变形金刚&director=秦天柱&star=大黄蜂`,
                headers:{
                    'content-type':"application/x-www-form-urlencoded"
                }
            }).then(val=>{
                console.log(val);
            })
        }
      
        btns[2].onclick = function(){
            fetch('http://localhost:3000/movies/7',{
                method:"put",
                body:JSON.stringify({
                    director:"擎天柱"
                }),
                headers:{
                    'content-type':'application/json'
                }
            })
        }

        btns[3].onclick = function(){
            fetch('http://localhost:3000/movies/6',{
                method:"PATCH",
                body:JSON.stringify({
                    director:"擎天柱"
                }),
                headers:{
                    'content-type':'application/json'
                }
            })
        }

        btns[4].onclick = function(){
            fetch('http://localhost:3000/movies/7',{
                method:"delete",
            })
        }
    </script>
</body>

</html>